<template>
  <TopSafeArea/>

  <view class=" container uni-padding-wrap uni-common-mt">
    <view>
      <view class="item-title">
        region:
      </view>
      <view class="uni-form-item uni-column">
        <input class="uni-input" v-model="ossForm.region" placeholder="" />
      </view>
    </view>

    <view>
      <view class="item-title">
        bucket:
      </view>
      <view class="uni-form-item uni-column">
        <input class="uni-input" v-model="ossForm.bucket" placeholder="" />
      </view>
    </view>

    <view>
      <view class="item-title">
        keyId:
      </view>
      <view class="uni-form-item uni-column">
        <input class="uni-input" v-model="ossForm.keyId" placeholder="" />
      </view>
    </view>

    <view>
      <view class="item-title">
        keySecret:
      </view>
      <view class="uni-form-item uni-column">
        <input class="uni-input" v-model="ossForm.keySecret" placeholder="" />
      </view>
    </view>
    <view>
      <!--      <button type="default" @click="ossFormValid()">测试</button>-->
      <button type="default" @click="formSubmit()" class="btn-submit">保存</button>
    </view>
  </view>
</template>
<script setup lang="ts">
import '@/utils/http'
import { reactive } from 'vue'
import type { OssForm } from '@/api/pwd/type'
import { useOssStore } from '@/stores/modules/oss'
import { onLoad } from '@dcloudio/uni-app'

let ossStore = useOssStore()
// @ts-ignore
const ossForm = reactive<OssForm>({})
onLoad(() => {
  console.log('my onLoad')
  Object.assign(ossForm, ossStore.ossForm)
})

const formSubmit = () => {
  console.log('submit ossForm:', ossForm.region)
  ossStore.setValue(ossForm)
}
const ossFormValid = () => {
  console.log('测试')
  // 调用后台接口 todo

}
</script>
<style lang="scss" scoped>

.container {
  height: 100vh;
  margin-top: -1.1vh;

  ::v-deep & * {
    font-size: 17px;
  }

  .btn-submit {
    margin-top: 20rpx;
  }

  .item-title {
    margin-top: 20rpx;
  }


  .uni-form-item .item-title {
    padding: 20rpx 0;
  }
}

@media (prefers-color-scheme: dark) {
  /* DarkMode 下的样式 start */
  .container {

    background-color: rgba(31, 42, 61, 0.49) !important; // 强制覆盖子元素的背景颜色
    color: $uni-dark-color !important; // 强制覆盖子元素的文字颜色
    ::v-deep & * {
      background-color: $uni-dark-bg-color !important; // 强制覆盖子元素的背景颜色
      color: $uni-dark-color !important; // 强制覆盖子元素的文字颜色
    }

  }
  /* DarkMode 下的样式 end */
}

</style>
